<template>
	<view class="shopcart">
		<!-- @click="toggleList" -->
		<view class="cartBottom">
			<view class="carIcon">
				<view class="iconBox" :class="getAllCount ? 'active' : '' " @click="toggleList">
					<text class="allcount" v-if="getAllCount">{{getAllCount}}</text>
					<image src="/static/cart.png" mode="" class="img"></image>
					
				</view>
				
			</view>

			<text class="allprice" v-if="utype=='1'">总价: <span>￥{{getAllPrice}}</span></text>
			<button class="c-clear" @click="delShopcart()">清空</button>
			<button class="c-submit" :class="getAllCount ? 'active' : '' " @click="togglebutton" style="background:#6d1c79;">结算</button>
			
		</view>
		<!-- 选择的商品 -->
		<view class="cartList" v-show="isShowList && getList.length">
			<scroll-view scroll-y style="max-height: 300px;">
				
				<view class="list">
					<view class="settlement">确认订单信息</view>
					<view class="list-text" v-for="(item,index) in getList" :key="index">
						<text style="flex:1;text-align:left">{{item.name}}</text>
						<block v-if="item.show_edit_price"><input type="number" v-model="item.memberPrice" class="upd_price" /> <span class="change-price" @click="updatePrice(item)">确认</span></block>  <block v-if="item.show_edit_price==0"><text style="flex:1" v-if="utype==1">￥{{item.memberPrice}} <span class="change-price" @click="changePrice(item)">改价</span></text></block>
						<cartcontrol :food="item" @add="addCart" @dec="decreaseCart"></cartcontrol>
					</view>
				</view>
				<view class="van-cell-group">
					<view class="van-cell van-field" v-if="utype=='1'" v-show="accountMoney">
						<label class="van-cell_title">使用余额</label>
							<div class="van-cell_value" style="line-height: 35px;">
								<div class="van-field_body">
									<checkbox-group class="uni-list radio-list" @change="radioChange">
										<label class="uni-list-cell label-list" v-for="(item,index) in radioItems" :key="item.id">
											<checkbox :value="item.value" :checked="balance" />
										</label>
									</checkbox-group>
									<span>(会员卡余额
										<strong id="memberMoney">{{accountMoney}}</strong>
										)
									</span>
								</div>
							</div>
					</view>
				<view class="set-type van-cell" v-if="utype=='1'" v-show="payShow">
					<label class="van-cell_title">支付方式</label>
					<div class="van-cell_value">
						<div class="van-field_body" style="text-align: center;height: 100%;">
							<button class="payment" :class="{pay_active:checkP=='checkP1'}" @click="setPay('现金','checkP1')">现金</button>
							<button class="payment" :class="{pay_active:checkP=='checkP2'}" @click="setPay('支付宝','checkP2')">支付宝</button>
							<button class="payment" :class="{pay_active:checkP=='checkP3'}" @click="setPay('微信','checkP3')">微信</button>
						</div>
					</div>
				</view>
				<view class="van-cell van-field">
					<label class="van-cell_title">备注</label>
						<div class="van-cell_value">
							<div class="van-field_body">
								<textarea type="text" maxlength="200" v-model="remarks"  placeholder="输入备注" placeholder-style="color:#ccc" class="van-field_control"></textarea>
							</div>
						</div>
				</view>
				
				<view class="submit-box van-cell" style="padding-bottom: 30px;">
					<button class="c-submit" @click="goBuy(utype)" style="margin:auto;">提交订单</button>
				</view>
			</view>
			</scroll-view>
		</view>
		<view class="listMask" v-show="isShowList && getList.length" @click="toggleList"></view>
	</view>
</template>

<script>
	import cartcontrol from '@/components/cartcontrol.vue'
	// import {mul} from '@/utils/lib'
	export default {
		props: {
			goods: {
				type: Array
			},
			utype: {
				type: Number
			},
			isShowList: {
				type: Boolean
			},
			accountMoney: {
				type: Number
			},
			clearStatus: {
				type: Boolean
			}
		},
		data() {
			return {
				//isShowList: false,
				displayType:"center",
				isDisabled: false,
				checkP:'checkP1',
				checkedValue:'',
				currentValue:'red',
				payType:'现金',
				remarks:'',
				balance:false,
				remain:0,
				payShow:true,
				editPrice:false,
				radioItems: [{
						id: '1',
						value: '是'
					}
				],
			};
		},
		components: {
			cartcontrol
		},
		computed: {
			getList() {
				let result = [];
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count) {
							result.push(food)
							// console.log('res', JSON.stringify(result))
						}
					})
				})
				return result
			},
			// 获得购物车所有商品数量
			getAllCount() {
				let result = 0;
				this.getList.forEach((food) => {
					result += food.count
				})
				return result
			},



			// 总价
			getAllPrice() {
				let result = 0;
				let result1 = 0;
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						result1 += this.accMul(food.count, food.memberPrice)
						result = result1;
					})
				})
				return result
			}
		},
		methods: {
			// 解决浮点数 运算出现多位小数
			accMul(arg1, arg2) {
				let m = 0,
					s1 = '',
					s2 = '';
				if (arg1 && arg1 != null)
					s1 = arg1.toString();
				if (arg2 && arg2 != null)
					s2 = arg2.toString();
				// console.log('m1',s2.replace('.',''))
				try {
					m += s1.split('.')[1].length
				} catch (e) {}
				try {
					m += s2.split('.')[1].length
				} catch (e) {}

				return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m);
			},
			radioChange() {
				this.balance= !this.balance;
				this.remainFun();
			},
			setPay(type,checkOr){
				this.checkP = checkOr;
				this.payType = type;
			},

			toggleList() {
				this.$emit('toggleListCart');
				this.remainFun();
			},
			togglebutton(){
				if (this.getList.length) {
					this.$emit('toggleListCart');
				}else{
					uni.showToast({
						title:'没有选择出货的商品',
						icon:'none'
					});
				}
				this.remainFun();
			},
			remainFun(){
				if(this.balance){
					var remain = this.accountMoney-this.getAllPrice;
					if(remain > 0){
						this.payShow = false;
					}else {
						this.payShow = true;
					}
				}else{
					this.payShow = true;
				}
			},
			delShopcart() {
				this.$emit('delAll');
			},
			delAll(){
				this.remarks = '';
				this.payType = '现金';
				this.checkP = 'checkP1';
				this.balance = false;
			},
			goBuy(utype){
				if(this.editPrice){
					uni.showToast({
						title:'请确认修改价格',
						icon:'none'
					});
					return false;
				}
				var remarks = this.remarks;
				var accountPay = this.balance ? this.accountMoney : 0;
				var cardPay = this.balance ? true : false;
				var payInfo =[this.payType,remarks,accountPay,cardPay,utype];
				this.$emit('shopcartBuy',payInfo);
				const _this=this;
				setTimeout(function(){
					_this.delAll();
				},3500);
			},
			changePrice:function(item){
				item.show_edit_price=1;
				this.editPrice = true;
			},
			updatePrice:function(item){
				if(item.sgIsTimeCard){
						item.memberPrice = parseFloat(item.memberPrice).toFixed(2);
						this.$emit('updPrice', item)
						item.show_edit_price=0;
						this.editPrice = false;
						this.remainFun();
				}else{
					if(parseInt(item.memberPrice)<parseInt(item.minPrice)){
						let that=this;
						uni.showToast({
							title: '修改价格不能低于会员价格',
							duration: 1000,
							success: function () {
								setTimeout(function(){
									 item.memberPrice = parseFloat(item.minPrice).toFixed(2);
									 that.$emit('updPrice', item)
									 item.show_edit_price=0;
									 that.editPrice = false;
									 that.remainFun();
								},1000) 
								}
						});
					}
					else{
						// item.memberPrice = parseInt(item.memberPrice)<parseInt(item.minPrice) ? item.minPrice:item.memberPrice;
						item.memberPrice = parseFloat(item.memberPrice).toFixed(2);
						this.$emit('updPrice', item)
						item.show_edit_price=0;
						this.editPrice = false;
						this.remainFun();
					}
				}
			
			},
			addCart: function(item) {
				this.$emit('add', item);
				this.remainFun();
			},
			decreaseCart(item) {
				this.$emit('dec', item)
				this.remainFun();
			}

		},
	}
</script>

<style scoped>
	.list-text {
		display: flex;
		flex-direction: row;
	}
.typename{position: absolute;
    bottom: 5px;
        z-index: 999;
        left: 20px;
    font-size: 14px;
    color: #aaa;}
	.shopcart .cartBottom {
		position: fixed;
		bottom:2.5rem;
		left: 0;
		right: 0;
		height: 54px;
		z-index: 99;
		display: flex;
		background-color: #FFFFFF;
	}

	.bar-title{     height: 60px;
    line-height: 60px;background: #fff;   display: inline-block;
    width: 100%;}
	.bar-title text{padding-left: 10px;}
	.c-submit,.c-clear,.allprice{
		float: right;
		margin-right: 10px;
		margin-left: 5px;
    line-height: 35px;
    height: 35px;
    margin-top: 8px;
	}
	.allprice span{
		color: #f01414;
	}
	.c-clear{
		font-size: 14px;
	}
	.c-submit{    background: linear-gradient(to right bottom, #fb4386, #ec4fae, #ce63d0, #a377ea, #6488f9);color: #FFFFFF; font-size: 14px;}
	.carIcon {
		flex: 1;
	}
	.change-price{margin-left: 10px;
    text-decoration: underline;
    color: #63b9e5;}
	.iconBox {
		position: absolute;
		bottom: 22px;
		left: 18px;
		z-index: 101;
		border-radius: 50%;
		height: 48px;
		width: 48px;
		line-height: 55px;
		/* border: 6px solid #141d27; */
	}

	.iconBox .allcount {
		position: absolute;
		right: -6px;
		top: 0;
		display: inline-block;
		padding: 0 6px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 10px;
		background-color: #f01414;
		color: #ffffff;
		z-index: 20;
	}

	.img {
		font-size: 0.8rem;
		line-height: 24px;
		width: 3rem;
		height: 3rem;
		color: #cccccc;
		border-radius: 50%;
	}

	.carIcon .active {
		
	}

	.middle {
		display: flex;
		flex-direction: column;
		flex: 2;
		color: #ffffff;
	}

	.BtnRight {
		flex: 1;
	}

	.cartList {
		position: fixed;
		bottom: 94px;
		left: 0;
		right: 0;
		z-index: 90;
	}

	.cartList .title,
	.cartList .list-text {
		display: flex;
		flex-direction: row;
		font-size: 14px;
	}

	.cartList .title {
		background: #F3F5F7;
		justify-content: space-between;
		padding: 4px 8px;
	}

	.cartList .list-text {
		padding: 10px 6px 10px 8px;
		text-align: center;
	}

	.list {
		background: #F8F8F8;
		padding: 10px;
	}

    .settlement{
		text-align: center;
		padding: 10px;
		font-weight:bold
	}
	/* 遮布 */
	.listMask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 89;
		opacity: 0.5;
		background: #6a7076;
	}
	.upd_price{border: 1px solid #ccc; background: #fff;width: 90;}
	.payment {
		color: #000000;
		background: #f8f8f8;
	}
	.pay_active {
		background: #6d1c79;
		color: #fff;
	}
	.cartList .van-cell-group{
		padding: 0 10px;
		background: #f8f8f8;
	}
	.cartList .van-cell {
		padding-right: 30px;
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: flex;
		line-height: 24px;
		position: relative;
		background-color: #F8F8F8;
		color: #000;
		font-size: 14px;
		overflow: hidden;
		padding: 0px 6px 10px 8px
	}
	.cartList .van-cell_title {
		max-width: 80px;
		height:35px;
		line-height: 35px;
		text-align: left;
	}
	.cartList .van-cell_title, 
	.cartList .van-cell_value {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    -moz-box-flex: 1;
	    flex: 1;
	}
	.cartList .van-cell_value {
		color: #969799;
		overflow: hidden;
		text-align: right;
		position: relative;
		vertical-align: middle;
	}
	.cartList .van-field_body {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-moz-box-align: center;
		align-items: center;
	}
	.cartList .van-field_body uni-button{
		margin-left: unset;
		margin-right: auto;
		padding-left: 16px;
		padding-right: 16px;
		font-size: 12px;
	}
	.cartList .van-field_control {
		border: 0;
		margin: 0;
		padding: 0;
		width: 95%;
		resize: none;
		display: block;
		color: #323233;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background-color: transparent;
		text-align: left;
		height: 35px;
		line-height: 35px;
		border-bottom: 1px solid #ccc;
		border-radius: 0;
		font-size:14px;
	}
	.radio-list .uni-list-cell {
		margin-right:5px;
	}
	.cartList #memberMoney {
		color: #FF7F00;
		font-size: 14px;
	}
	.cartList uni-checkbox .uni-checkbox-input {
		border-radius: 11px !important;
	}
	.cartList uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: rgb(242, 74, 158) !important;
	}
</style>
